<template>
    <div>
        <page-header :title="$route.meta.title" content="" />
        <page-main>
            <search-bar v-auth="'order.search'">
                <el-form :model="form" size="small" label-width="100px" label-suffix="：">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="店铺">
                                <!-- <el-input v-model="form.name" placeholder="请输入订单编号" clearable
                                    @keydown.enter.native="refresh" @clear="refresh" /> -->
                                <el-select v-model="form.shop_id" placeholder="请选择店铺" clearable @clear="refresh">
                                    <el-option v-for="item in shopOptions" :key="item.value" :label="item.label"
                                               :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="refresh">筛 选</el-button>
                    </el-form-item>
                </el-form>
            </search-bar>
            <el-table ref="table" v-loading="loading" class="list-table" :data="listData" border stripe
                      highlight-current-row
            >
                <el-table-column prop="id" label="ID" align="center" />
                <el-table-column prop="shop.nickname" label="店铺" align="center" />
                <el-table-column label="购买套餐">
                    <template slot-scope="scope">
                        <div class="goods-info">
                            <div class="goods-title">{{ scope.row.sku.name }}</div>
                            <div style="font-size: 12px;">{{ scope.row.sku.description }}</div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="平台" align="center">
                    <template slot-scope="scope">
                        {{ scope.row.platform === '1' ? '微信' : '支付宝' }}
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="订单金额（元）" align="center" :formatter="(row) => `¥${row.price}`" />
                <el-table-column prop="p_price" label="代理分成（元）" align="center" :formatter="(row) => `¥${row.p_price}`" />
                <el-table-column prop="shop_price" label="店铺分成（元）" align="center" :formatter="(row) => `¥${row.shop_price}`" />
                <el-table-column prop="user.mobile" label="用户" align="center" />
                <el-table-column prop="created_at" label="下单时间" align="center" :formatter="row => `${$dayjs(row.created_at * 1000).format('YYYY-MM-DD HH:mm:ss')}`" />
                <el-table-column prop="pay_at" label="支付时间" align="center" :formatter="row => `${$dayjs(row.pay_at * 1000).format('YYYY-MM-DD HH:mm:ss')}`" />
            </el-table>

            <el-pagination :current-page.sync="page.page" :total="page.total" :page-size.sync="page.size"
                           :page-sizes.sync="page.sizes" layout="total, sizes, ->, prev, pager, next, jumper" background
                           @size-change="refresh" @current-change="getDataList"
            />
        </page-main>
        <FormDialog :id="detailFormDialog.id" :visible.sync="detailFormDialog.visible" :view="formView"
                    @success="getDataList"
        />
    </div>
</template>

<script>
import mixin from '@/mixins/mixin'
import FormDialog from './components/FormDialog/index'
export default {
    components: {
        FormDialog
    },
    mixins: [mixin],
    data() {
        return {
            dialogMode: false,
            dialogTableVisible: false,
            pageRouter: {
                create: 'goodsAdd',
                edit: 'goodsEdit'
            },
            form: {
                shop_id: ''
            },
            shopOptions: [],
            goodsDate: [
                // {
                //     id: 1,
                //     shop: {name: 11},
                //     cover: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fci.xiaohongshu.com%2F72e576c8-0195-c2ab-a660-503aec891172%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fci.xiaohongshu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643949760&t=f59de6dddba1b52a9124d17e4565f3bf',
                //     updated_at: 11111,
                //     title: '11111',
                //     brand: {name: 'abc'},
                //     nickname: '打算'
                // }
            ],
            api: {
                list: 'order/order/tabulation'
                // del: 'product/product/delete',
                // changeStatus: 'product/product/change-status'
            }
        }
    },
    created() {
        this.getShopOptions()
        this.getDataList()
    },
    methods: {
        getShopOptions() {
            this.$api.post('member/member/tabulation').then(res => {
                this.shopOptions = res.data.data.map(item => {
                    return {
                        label: item.nickname,
                        value: item.id
                    }
                })
            })
        },
        goDelivery() {
            this.dialogTableVisible = true
        }
    }

}
</script>

<style lang="scss" scoped>
.goods-info {
    padding: 5px;
    border: 1px dashed #ececec;
    background-color: #fff;
    border-radius: 4px;
}
.goods-title {
    margin-bottom: 3px;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
</style>
